<template>
	<view class="item-box">
		<view class="item-text">
			<view class="item-title">{{item.indicatorItem||'-'}}</view>
			<view class="item-desc">{{item.indicatorDesc||'-'}}</view>
		</view>
		<view class="item-num" :style="itemNumStyle">{{itemNum}}</view>
		<view class="uni-icon" v-if="icon">&#xe605;</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {
						itemScore: "5"
					}
				}
			},
			icon: {
				type: Boolean,
				default: true,
			},
		},
		computed: {
			itemNumStyle() {
				let res = {}
				if (this.item.itemScore == '0') {
					res.color = '#333333';
				} else if (this.item.itemScore.startsWith('-')) {
					res.color = '#d60a0a';
				} else {
					res.color = '#388101';
				}
				return res;
			},
			itemNum() {
				let res = Number(this.item.itemScore)
				if (res > 0) {
					res = "+" + res;
				}
				return res;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box {
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.item-text {
			flex: 1;
			padding-right: 10rpx;

			.item-title {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 1em;
				margin-bottom: 16rpx;
			}

			.item-desc {
				font-size: 28rpx;
				color: #666;
				line-height: 1.3em;
			}
		}

		.item-num {
			padding: 0 10rpx;
		}

		.uni-icon {
			padding: 0 10rpx;
			font-size: 30rpx;
		}
	}
</style>